<template>
  <div class="map-component">
    <div id="mapContainer" class="map" tabindex="0"></div>
    <div id='right'>
      <div>
        <div class='title'>选择模式</div>
        <input type='radio' name='mode' value='dragMap'>拖拽地图模式</input>
        </br>
        <input type='radio' name='mode' value='dragMarker' checked>拖拽Marker模式</input>
      </div>
      <div>
        <div class='title'>选址结果</div>
        <div class='c'>经纬度:</div>
        <div id='lnglat'>{{position}}</div>
        <div class='c'>地址:</div>
        <div id='address'>{{address}}</div>
      </div>
    </div>
    <!--<div id="pickerBox">
      <input id="pickerInput" placeholder="输入关键字选取地点" />
      <div id="poiInfo"></div>
    </div>-->
  </div>
</template>


<script>
  import {getJWCode} from '@/api/common'

  export default {
    name: 'MapSelectPoint',
    props: {
      addressDetail:{
        type:String
      },
      Longitude:{},
      latitude:{}
    },
    watch:{
      addressDetail(newV){
        if(this.Longitude){
          this.initMap([this.Longitude,this.latitude])
        }else{
          getJWCode(newV).then(res=>{
            if(res.status === '1'){
              this.position = res.pois[0].location
              this.initMap(this.position.split(','))
            }
          })
        }

      },
    },
    data() {
      return {
        position:'',
        address:'',
        inputText:'',
        positionPicker:null,
        poiPicker:''

      }
    },
    methods: {
      initMap(center){
        initAMapUI()

        const map = new AMap.Map('mapContainer', {
          zoom: 16,
          scrollWheel: true,
          center
        })

        AMapUI.loadUI(['misc/PositionPicker'], PositionPicker=> {
          this.positionPicker = new PositionPicker({
            mode: 'dragMap',
            map: map,
            iconStyle: { //自定义外观
              url: '//webapi.amap.com/ui/1.0/assets/position-picker2.png',
              ancher: [24, 40],
              pageSize: [48, 48]
            }
          });
          this.positionPicker.on('success', positionResult=>{
            this.address = positionResult.address
            document.getElementById('lnglat').innerHTML = positionResult.position;
            this.$emit('getLocation',positionResult.position)
          });
          this.positionPicker.on('fail', positionResult => {
            this.position =  positionResult.position
            this.address = positionResult.address
          });
          var onModeChange = (e)=> {
            this.positionPicker.setMode(e.target.value)
          }
          var dragMapMode = document.getElementsByName('mode')[0];
          var dragMarkerMode = document.getElementsByName('mode')[1];

          AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
          AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);

          this.positionPicker.start();
        });
      },

    },
    mounted() {
      // this.initMap()
    },

  }
</script>

<style lang="scss">
  .map-component{
    position: relative;
    margin-top: 20px;
    .amap-copyright{
      height: 26px;
    }
    .map{
      height: 400px;
    }
    #right {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      color: #444;
      background-color: #f8f8f8;
      width: 30%;
      height: 100%;

    }
    #start,
    #stop,
    #right input {
      margin: 4px;
      /*margin-left: 15px;*/
    }

    .title {
      width: 100%;
      background-color: #dadada
    }

    .c {
      font-weight: 600;
      padding-left: 15px;
      padding-top: 4px;
    }

    #lnglat,
    #address,
    #nearestJunction,
    #nearestRoad,
    #nearestPOI,
    .title {
      padding-left: 15px;
    }


    #pickerBox {
      position: absolute;
      z-index: 9999;
      top: 10px;
      right: 10px;
      width: 300px;
    }

    #pickerInput {
      width: 200px;
      padding: 5px 5px;
    }

    #poiInfo {
      background: #fff;
    }
  }

</style>
